<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body,html{
            height: 100%;
        }
        ul{
            list-style:none;
            height: 100%;
        }
        ul li{
            height: 100%;
        }
        ol{
            list-style:none;
            position:fixed;
            top:80px;
            left:50px;
        }
        ol li{
            width: 50px;
            height:50px;
            border:1px solid #000;
            text-align:center;
            line-height:50px;
            margin-top:-1px;
            cursor:pointer;

        }
    </style>
</head>
<body>
<ul>
    <li>鞋子区域</li>
    <li>袜子区域</li>
    <li>裤子区域</li>
    <li>裙子区域</li>
    <li>帽子区域</li>
</ul>
<ol>
    <li>鞋子</li>
    <li>袜子</li>
    <li>裤子</li>
    <li>裙子</li>
    <li>帽子</li>
</ol>
<script>
    function scroll(){
        if(window.pageYOffset!==undefined){
            return{
//        谷歌、火狐、IE9+
                "top":window.pageYOffset,
                "left":window.pageXOffset
            };
//          IE678
        }else if(document.compatMode===CSS1Compat){
            return{
                "top":document.documentElement.scrollTop,
                "left":document.documentElement.scrollLeft
            };
        }else{
            return{
                "top":document.body.scrollTop,
                "left":document.body.scrollLeft
            };
        }
    }
    //点击ol中的li，屏幕滑到对应的ul中的li范围内
    var ul=document.getElementsByTagName("ul")[0];
    var ol=document.getElementsByTagName("ol")[0];
    var ulLiArr=ul.children;
    var olLiArr=ol.children;
    var target=0;
    var leader=0;
    var timer=null;
    var arrColor=["pink","lightblue","lightyellow","lightgreen","darkred"];
//    ol和ul颜色对应
    for(var i=0;i<arrColor.length;i++){
        ulLiArr[i].style.backgroundColor=arrColor[i];
        olLiArr[i].style.backgroundColor=arrColor[i];
        olLiArr[i].index=i;
        olLiArr[i].onclick=function(){
            target=ulLiArr[this.index].offsetTop;
            clearInterval(timer);
            timer=setInterval(function(){
                var step=(target-leader)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                leader=leader+step;
                window.scrollTo(0,leader);
                if(Math.abs(target-leader)<=Math.abs(step)){
                    window.scrollTo(0,target);
                    clearInterval(timer);
                }
            },30)

        }
    }
    //用scroll事件模拟盒子距离最顶端的距离,使其一开始出现屏幕滚动的情况会有滑动，而不是直接跳转
    window.onscroll=function(){
            leader=scroll().top;
        }
</script>
</body>
</html>